<template>
  <div v-if="isAuth(['ROOT', 'WORKFLOW:APPROVAL'])">
    <el-form
        :inline="true"
        :model="dataForm"
        :rules="dataRule"
        ref="dataForm"
        @keyup.enter.native="searchHandle()"
    >
      <el-form-item prop="applyUserName">
        <el-input v-model="dataForm.applyUserName" size="medium" placeholder="申请人" clearable="clearable"/>
      </el-form-item>
      <el-form-item prop="type">
        <el-select v-model="dataForm.applyType" placeholder="类别" size="medium" clearable="clearable">
          <el-option label="会议申请" value="会议申请"></el-option>
          <el-option label="员工请假" value="员工请假"></el-option>
          <el-option label="报销申请" value="报销申请"></el-option>
          <el-option label="员工离职" value="报销申请"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="medium" @click="searchHandle()">查询</el-button>
      </el-form-item>
      <el-form-item class="mold">
        <el-radio-group v-model="dataForm.status" size="medium" @change="searchHandle()">
          <el-radio-button label="待审批"></el-radio-button>
          <el-radio-button label="已审批"></el-radio-button>
          <el-radio-button label="已结束"></el-radio-button>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <el-table
        ref="approvalTable"
        :data="dataList"
        border="border"
        v-loading="dataListLoading"
        cell-style="padding: 4px 0"
        size="medium"
        style="width: 100%;"
        @expand-change="expand"
        :row-key="getRowKeys"
        :expand-row-keys="expands"
    >
      <el-table-column prop="remark" header-align="center" align="center" type="expand">
        <template #default="scope">
          <div class="content-container">
            <table class="content-table">
              <tbody v-if="scope.row.applyType == '会议申请'">
              <tr>
                <th><span>主题</span></th>
                <td :applyTitle="scope.row.applyTitle">{{ scope.row.applyTitle }}</td>
              </tr>
              <tr>
                <th><span>内容</span></th>
                <td :applyTitle="content.desc">{{ content.desc }}</td>
              </tr>
              <tr>
                <th><span>日期</span></th>
                <td>{{ content.date }}&nbsp;&nbsp;&nbsp;{{ content.start }} ~ {{ content.end }}</td>
              </tr>
              <tr>
                <th><span>地点</span></th>
                <td>{{ content.place }}</td>
              </tr>
              <tr>
                <th><span>参会人</span></th>
                <td :applyTitle="content.members">{{ content.members }}</td>
              </tr>
              <tr>
                <th><span>审批结果</span></th>
                <td>
                  <span v-if="scope.row.status!='已结束'" style="color: orange;">审批中</span>
                  <span v-if="scope.row.status=='已结束'&&scope.row.result=='已同意'" style="color: #17B3A3;">已同意</span>
                  <span v-if="scope.row.status=='已结束'&&scope.row.result=='已拒绝'" style="color: #f56c6c;">已拒绝</span>
                </td>
              </tr>
              </tbody>
              <tbody v-if="scope.row.applyType == '员工请假'">
              <tr>
                <th><span>请假原因</span></th>
                <td :applyTitle="content.applyReason">{{ content.applyReason }}</td>
              </tr>
              <tr>
                <th><span>请假类型</span></th>
                <td>{{ content.type == 1 ? '病假' : '事假' }}</td>
              </tr>
              <tr>
                <th><span>申请人</span></th>
                <td>{{ content.applyUserName }}</td>
              </tr>
              <tr>
                <th><span>起始时间</span></th>
                <td>{{ content.start }}</td>
              </tr>
              <tr>
                <th><span>截止时间</span></th>
                <td>{{ content.end }}</td>
              </tr>
              <tr>
                <th><span>审批结果</span></th>
                <td>
                  <span v-if="scope.row.status!='已结束'" style="color: orange;">审批中</span>
                  <span v-if="scope.row.status=='已结束'&&scope.row.result=='已同意'" style="color: #17B3A3;">已同意</span>
                  <span v-if="scope.row.status=='已结束'&&scope.row.result=='已拒绝'" style="color: #f56c6c;">已拒绝</span>
                </td>
              </tr>
              </tbody>
              <tbody v-if="scope.row.applyType == '报销申请'">
              <tr>
                <th><span>申请人</span></th>
                <td>{{ content.applyUserName }}</td>
              </tr>
              <tr>
                <th><span>报销金额</span></th>
                <td>{{ content.amount }}元</td>
              </tr>
              <tr>
                <th><span>借款金额</span></th>
                <td>{{ content.anleihen }}元</td>
              </tr>
              <tr>
                <th><span>实际金额</span></th>
                <td>{{ content.balance }}元</td>
              </tr>
              <tr>
                <th><span>报销类型</span></th>
                <td>{{ content.type }}</td>
              </tr>
              <tr>
                <th><span>申请时间</span></th>
                <td>{{ content.date }}</td>
              </tr>
              <tr>
                <th><span>审批结果</span></th>
                <td>
                  <span v-if="scope.row.status!='已结束'" style="color: orange;">审批中</span>
                  <span v-if="scope.row.status=='已结束'&&scope.row.result=='已同意'" style="color: #17B3A3;">已同意</span>
                  <span v-if="scope.row.status=='已结束'&&scope.row.result=='已拒绝'" style="color: #f56c6c;">已拒绝</span>
                </td>
              </tr>
              </tbody>
              <tbody v-if="scope.row.applyType == '员工离职'">
              <tr>
                <th><span>离职原因</span></th>
                <td :applyTitle="content.applyReason">{{ content.applyReason }}</td>
              </tr>
              <tr>
                <th><span>申请人</span></th>
                <td>{{ content.applyUserName }}</td>
              </tr>
              <tr>
                <th><span>离职时间</span></th>
                <td>{{ content.date }}</td>
              </tr>
              <tr>
                <th><span>审批结果</span></th>
                <td>
                  <span v-if="scope.row.status!='已结束'" style="color: orange;">审批中</span>
                  <span v-if="scope.row.status=='已结束'&&scope.row.result=='已同意'" style="color: #17B3A3;">已同意</span>
                  <span v-if="scope.row.status=='已结束'&&scope.row.result=='已拒绝'" style="color: #f56c6c;">已拒绝</span>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </template>
      </el-table-column>
      <el-table-column type="index" header-align="center" align="center" label="序号" width="80"/>
      <el-table-column prop="applyTitle" header-align="center" align="center" label="审批事项" min-width="280"/>
      <el-table-column prop="applyType" header-align="center" align="center" label="类别" min-width="120"/>
      <el-table-column prop="applyUserName" header-align="center" align="center" label="申请人" min-width="120"/>
      <el-table-column prop="applyTime" header-align="center" align="center" label="发起日期" min-width="180"/>
      <el-table-column prop="status" header-align="center" align="center" label="状态" min-width="120">
        <template #default="scope">
          <span v-if="scope.row.status!='已结束'" style="color: orange;">审批中</span>
          <span v-if="scope.row.status=='已结束'&&scope.row.result=='已同意'" style="color: #17B3A3;">已同意</span>
          <span v-if="scope.row.status=='已结束'&&scope.row.result=='已拒绝'" style="color: #f56c6c;">已拒绝</span>
        </template>
      </el-table-column>
      <el-table-column header-align="center" align="center" width="150" label="操作">
        <template #default="scope">
          <el-button
              type="text"
              size="medium"
              v-if="isAuth(['ROOT', 'WORKFLOW:APPROVAL']) && dataForm.status == '待审批'&&!scope.row.filing"
              @click="approveHandle(scope.row.flowId)"
              :disabled="scope.row.mine == 0"
          >
            审批
          </el-button>
          <el-button
              type="text"
              size="medium"
              v-if="dataForm.status != '待审批'" @click="viewHandle(scope.row)"
          >
            查看
          </el-button>

          <el-button
              type="text"
              size="medium"
              v-if="dataForm.status == '已结束'" @click="deleteHandle(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50]"
        :page-size="pageSize"
        :total="totalCount"
        layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
  </div>
</template>

<script>

export default {
  data: function () {
    return {
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataForm: {
        applyUserName: null,
        applyType: null,
        status: '待审批',
        mine: 0
      },
      dataList: [],
      expands: [],//如果数组中保存了某行记录的唯一值，那么这行的折叠面板展开
      getRowKeys(row) { //返回每一行的唯一值
        return row.flowId
      },
      // 某个审批详情的文字详情
      content: {},
      dataRule: {
        applyUserName: [{
          required: false,
          pattern: '^[\u4e00-\u9fa5]{1,20}$',
          message: '姓名格式错误'
        }]
      }
    };
  },
  created() {
    this.loadDataList();
  },
  methods: {
    // 加载表格数据
    loadDataList() {
      this.dataListLoading = true;
      let data = {
        applyUserName: this.dataForm.applyUserName,
        type: this.dataForm.applyType,
        status: this.dataForm.status,
        page: this.pageIndex,
        length: this.pageSize
      }
      console.log(data)
      this.$http('audit/detailList', 'POST', data, true, resp => {
        if (resp.code === 200) {
          // applyUserName	applyUserId	flowId	result	status	applyType	applyTitle	applyReason	applyStatus	applyTime	mine
          // 蒋云熙	2	52	待审批	待审批	员工请假	蒋云熙的请假申请	旅游	待审批	2022-05-05	1
          console.log(resp)
          let page = resp.page;
          this.dataList = page.list;
          this.totalCount = page.totalCount;
          this.dataListLoading = false;
        }
      })
    },
    // pageSize改变时
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.loadDataList();
    },
    // currentPage改变时
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.loadDataList();
    },
    // 查询数据
    searchHandle() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.$refs['dataForm'].clearValidate();
          if (this.dataForm.applyUserName === '') {
            this.dataForm.applyUserName = null;
          }
          if (this.pageIndex != 1) {
            this.pageIndex = 1;
          }
          this.loadDataList();
        } else {
          return false;
        }
      })
    },
    // 表格展开触发
    expand(row, expandedRows) {
      // 判断是否展开了折叠面板
      console.log(row.applyType)
      if (expandedRows.length > 0) {
        this.expands = []; // 关闭所有的折叠面板
        if (row) {
          // 展开你想展开的折叠面板
          this.expands.push(row.flowId);
          let data = {
            type: row.applyType,
            status: row.status,
            flowId: row.flowId
          }
          console.log(data)
          // console.log(data)
          this.$http("audit/auditContent", "POST", data, false, resp => {
            if (resp.code === 200) {
              this.content = resp.content;
              console.log(this.content)

              if (row.applyType === '报销申请') {
                if (this.content.typeId === 1) {
                  this.content.type = '普通报销';
                } else if (this.content.typeId === 2) {
                  this.content.type = '差旅报销';
                }
              }

              if (row.applyType === '员工离职') {

              }
            }
          })
        }
      } else {
        this.expands = [] // 默认不展开
      }
    },
    approveFn(flowId, approval) {
      this.dataListLoading = true;
      let data = {
        flowId,
        approval
      }
      this.$http("audit/auditTask", "POST", data, true, resp => {
        if (resp.code === 200) {
          this.pageIndex = 1;
          this.loadDataList();
        }
      })
    },
    approveHandle(flowId) {
      this.$confirm("请选择对该条申请的处理意见", "提示", {
        confirmButtonText: "同意",
        cancelButtonText: "否决",
        type: "warning",
        distinguishCancelAndClose: true,
        callback: action => {
          if (action === "confirm") {
            this.approveFn(flowId, "同意");
          } else if (action === "cancel") {
            this.approveFn(flowId, "否决");
          }
        }
      })
    },
    viewHandle(row) {
      this.$refs.approvalTable.toggleRowExpansion(row, true);
    },
    // 删除数据
    deleteHandle(row) {
      this.$confirm("请确认是否删除", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        distinguishCancelAndClose: true,
        callback: action => {
          if (action === "confirm") {
            let data = {
              flowId: row.flowId
            }
            // console.log(data)
            this.$http("audit/deleteAudit", "POST", data, false, resp => {
              if (resp.code === 200) {
                let rows = resp.rows;
                this.$message({
                  type: 'success',
                  message: '删除成功'
                })
                this.loadDataList()
              }
            })
          }
        }
      })
    }
  },
};
</script>

<style lang="less" scoped="scoped">
@import url('../../style/approval.less');
</style>
